<template>
  <div class="roll-text-control-edit">
    <MarqueeText ref="vMarqueeText" v-if="dSet.roll || roll" :d="d"/>
    <span class="rte-none" v-show="!d.text">请输入要滚动的文字</span>
    <RichEditorInline ref="vRichEditorInline" v-show="!dSet.roll&&!roll" :class="{across: d.rollType===2}" :value="d.text" @changeData="onChangeData"/>
  </div>
</template>

<script>
import RichEditorInline from '../comm/RichEditorInline'
import MarqueeText from '@/view/v/Controls/RollTextControl'
// import MarqueeTextAcross from '../comm/marquee-text/MarqueeTextAcross'
import dataApi from '@/view/data-api-edit'
import ExcuInterval from '@/modules/corejs/excu/excu-interval.js'
export default {
  components: {
    MarqueeText,
    RichEditorInline
  },
  props: {
    d: Object,
    index: Number
  },
  computed: {
    dSet () {
      return dataApi.setControls[this.index]
    },
    roll () {
      return this.index !== dataApi.activeIndex
    }
  },
  created () {
    // this.dataApi = dataApi
    this.excuInterval = new ExcuInterval()
  },
  mounted () {
    this.$refs.vRichEditorInline.focus()
  },
  methods: {
    onChangeData (v) {
      this.d.text = v
    },
    onSizeChange () {
      this.excuInterval.excu(() => {
        const { vMarqueeText } = this.$refs
        if (vMarqueeText) vMarqueeText.sizeUpdate()
      }, 300)
    }
  }
}
</script>

.<style scoped>
.roll-text-control-edit {
  height: 100%;
  /* overflow: auto; */
}
.tt {
  height: 100%;
  overflow: auto;
}
.across {
  white-space: nowrap;
  /* overflow: hidden;
  overflow-x: auto; */
}
.rte-none {
  position: absolute;
  top: 0;
  color: #f00;
}

</style>
